Loading walkthrough...

Gala Launchpad Application Walkthrough

Generated 2026-02-11 22:19:54 UTC from http://localhost:3000 — 63 pages captured at 1440×900

Public Pages

Home / Token Grid
Click to zoom

Home / Token Grid

Public Pages
/
The main landing page of the GalaChain Launchpad, serving as the primary discovery hub for all launched tokens. It targets traders, token creators, and casual browsers looking to explore the token ecosystem. This page is the central entry point from which users navigate to individual tokens, launch new ones, or access their profile.
UI Patterns: Card-based grid layout for token discovery with a scrollable horizontal carousel for recent launches. The page uses a dark theme with neon accent colors typical of DeFi platforms, with data density optimized for quick scanning.
Navigation: Users land here from direct URL, bookmarks, or the logo/home link in the nav bar. From here they click token cards to go to /buy-sell/{tokenName}, click Launch to go to /launch, or click My Profile to manage their account.
Key Features (8)
  • Live trade ticker banner scrolling recent buy/sell activity across tokens
  • Total volume display with time-range filters (1h, 1d, 7d)
  • Recent Launch horizontal carousel with newest tokens showing price and percentage
  • Launch a Coin call-to-action button with How It Works link
  • Trending Tokens grid with token cards showing name, creator, mcap, volume, and bonding curve percentage
  • Weekly Challenge Standings leaderboard ranked by market cap with top 10 tokens
  • US Trending topics sidebar sourced from X/Twitter with tweet counts
  • Token search input with filters dropdown
Interactive Elements (8)
  • Search Token Name text input with search icon
  • Filters dropdown button for token filtering
  • 1h / 1d / 7d volume time-range toggle buttons
  • Recent Launch carousel left/right navigation arrows
  • Token cards (clickable links to /buy-sell/{name})
  • Launch a Coin button
  • Bridge button in nav bar
  • Weekly Challenge Standings token links
Testing Observations (5)
  • Trending tokens grid loads with real data showing mcap and volume metrics
  • Live trade ticker animates with recent buy/sell activity
  • Recent Launch carousel renders with token logos and price data
  • Weekly Challenge Standings shows ranked tokens with GALA prices and USD values
  • Footer renders with social links, terms, and privacy policy links
Notes: The trade ticker at the top shows real-time or near-real-time trading activity. The US Trending section integrates X/Twitter trending topics as social context for traders.
Home with Live Streams
Click to zoom

Home with Live Streams

Public Pages streaming
/
The home page during active streaming sessions. Token cards with active live streams display a red LIVE badge, making it easy to discover who is broadcasting. The live trade ticker at top shows real-time buy/sell notifications across the platform.
UI Patterns: Live indicator badges, Real-time ticker bar, Token card grid with status overlays
Navigation: Default landing page when streams are active
Key Features (5)
  • Red LIVE badges on streaming token cards
  • Real-time trade ticker bar at top
  • Same trending tokens grid as standard home
  • Visual differentiation between live and idle tokens
  • Trade notifications showing token name and GALA amounts
Interactive Elements (5)
  • Token cards (click to view)
  • Search Token Name input
  • Filters button
  • Navigation links
  • Live ticker items (clickable)
Testing Observations (2)
  • Verify LIVE badges appear only on tokens with active streams.
  • Check that ticker updates in real-time via WebSocket.
Notes: Streaming variant of the home page. LIVE badges are driven by Mux stream status.
Token Detail & Trading
Click to zoom

Token Detail & Trading

Public Pages
/buy-sell/glelmam
The primary token trading page where users view detailed token information and execute buy/sell transactions on the bonding curve. It serves both traders looking to transact and researchers analyzing token metrics. This is the core revenue-generating page of the platform.
UI Patterns: Two-column layout with token info and chart on the left, trading panel on the right. Tab-based navigation for both the buy/sell toggle and the transactions/comments/holders data. The bonding curve progress uses a visual percentage indicator.
Navigation: Users arrive from the home page token grid, search results, shorthand URLs (/t/{name}), or direct links shared on social media. From here they can navigate to the creator's public profile, post comments, or return home.
Key Features (9)
  • Token header with logo, name, creator address link, and social sharing buttons (X, Telegram, clipboard)
  • View Badges clickable link showing token achievement badges
  • Price display with percentage change, marketcap in USD, volume in GALA, and total tokens created
  • Streams section showing live stream availability or empty state placeholder
  • Financial chart area for price visualization
  • Buy/Sell tabbed trading panel with GALA amount input, MAX button, balance displays, and fees breakdown
  • Trade mode toggle (Native) with checkbox switch
  • Bonding Curve Progress section with percentage, status, target market cap, and current pool value
  • Three-tab data section: Transactions history, Comments, and Holder Distribution
Interactive Elements (12)
  • Buy / Sell tab toggle
  • GALA amount text input field
  • MAX button to fill maximum balance
  • Trade on pool submit button
  • Trade mode Native/Advanced checkbox toggle
  • Share on X button
  • Share on Telegram button
  • Copy token link button
  • View Badges clickable element
  • Transactions / Comments / Holder Distribution tab navigation
  • Comment text input with Post button
  • Creator address link to public profile
Testing Observations (7)
  • Token data loads with real price (0.00003 GALA), marketcap ($0.11754 USD), and volume (20.0001 GALA)
  • Bonding curve shows 0.00% progress with Active Bonding Curve status
  • Transaction history displays with account links, buy/sell type, amounts, and relative timestamps
  • Comments tab shows empty state: No comments yet / Be the first to comment!
  • Holder Distribution tab shows single holder at 100.00%
  • Balance displays show 0.00 for both GALA and token when not authenticated
  • Streams section shows empty state: No streams yet
Notes: The token ticker symbol (EELEKM) differs from the token name (glelmam), which is a key platform behavior where symbols are auto-generated. The bonding curve target is displayed in GALA market cap units.
Token Detail with Live Stream
Click to zoom

Token Detail with Live Stream

Public Pages streaming
/buy-sell/{streamingTokenName}
The token detail page when a live stream is active. Features a large video player showing the live broadcast with title overlay, duration timer, and LIVE badge. The stream integrates with the existing token detail layout alongside chat and trading panels.
UI Patterns: Split layout: video left, chat right, Floating emoji reactions overlay, Live status indicators, Real-time chat panel
Navigation: Click token card with LIVE badge from home, or direct URL
Key Features (6)
  • Live stream video player with Mux HLS playback
  • LIVE badge and stream duration timer
  • Flag/report button on stream
  • Emoji reaction bar (heart, fire, party, diamond, star)
  • Chat panel with real-time messaging
  • Price stats bar with live token data
Interactive Elements (5)
  • Video player (play/pause)
  • Flag button
  • Emoji reaction buttons
  • Chat message input
  • Send message button
Testing Observations (1)
  • Verify video plays via HLS, chat connects via WebSocket, emoji reactions send correctly, flag button opens report dialog.
Notes: Uses streaming token (dsafa). Stream title overlay comes from Mux metadata.
Token Detail Chat & Trading (Live)
Click to zoom

Token Detail Chat & Trading (Live)

Public Pages streaming
/buy-sell/{streamingTokenName}
Scrolled-down view of a live streaming token detail page showing the chat panel, streams section with live thumbnail, Buy/Sell trading panel, and the beginning of the TradingView chart. Demonstrates the full below-the-fold experience during a live broadcast.
UI Patterns: Tabbed trading panel, Live stream thumbnail cards, Chat with empty state messaging
Navigation: Scroll down on live token detail page
Key Features (6)
  • Chat panel with message input and empty state
  • Streams section showing 1 active live stream thumbnail
  • Buy/Sell toggle with GALA amount input
  • Trade mode selector (Native)
  • MAX button for full balance trades
  • TradingView chart initialization
Interactive Elements (5)
  • Chat message input
  • Buy/Sell toggle
  • GALA amount input
  • MAX button
  • Stream thumbnail (click to focus)
Testing Observations (1)
  • Verify trading panel works during live stream, chat sends messages, stream thumbnails link correctly.
Notes: Below-the-fold content during live stream. Shows integration of streaming + trading + chat.
Token Badges Modal
Click to zoom

Token Badges Modal

Public Pages Modals
/buy-sell/glelmam
A modal dialog accessible from the token detail page that displays the badge system for tokens. It shows achievement tiers for both trading volume and community engagement, helping users understand token maturity and community health at a glance.
UI Patterns: Standard modal dialog overlay with a close button. Content is organized into two badge category sections (Volume and Engagement), each displaying a horizontal row of tier badges with icons and labels. Uses the compound component modal pattern with overlay.
Navigation: Users open this modal by clicking the View Badges element on the token detail page. The modal is dismissed via the Close button or clicking outside the modal overlay, returning to the token detail page.
Key Features (5)
  • Volume badge tier progression: 1k, 10k, 100k, 1M+ with distinct badge icons
  • Engagement badge tier progression: SPARK, GATHERING, CROWD, MOVEMENT with distinct badge icons
  • Close button to dismiss the modal
  • Badge icons/logos for each tier level
  • Clear tier naming convention indicating progression scale
Interactive Elements (2)
  • Close button to dismiss the modal
  • Modal overlay (click to dismiss)
Testing Observations (5)
  • Modal opens when View Badges is clicked on the token detail page
  • All 4 volume badge tiers render with icons: 1k, 10k, 100k, 1M+
  • All 4 engagement badge tiers render with icons: SPARK, GATHERING, CROWD, MOVEMENT
  • Close button is visible and functional
  • Modal dialog has proper ARIA role
Notes: The badges are a gamification feature that incentivize both trading volume and community engagement. Current token may not have earned any badges yet, but all tiers are displayed for reference.
Token Comments Section
Click to zoom

Token Comments Section

Public Pages
/buy-sell/glelmam/comments
The comments sub-route of the token detail page that deep-links directly to the Comments tab. It provides a community discussion space for each token where users can post opinions, analysis, or questions. Targeted at active community members and traders seeking social sentiment.
UI Patterns: Same two-column layout as the token detail page, with the Comments tab automatically selected in the bottom tabbed data section. The comment form uses a simple inline text input with a submit button.
Navigation: Users arrive via the /buy-sell/{token}/comments deep link, which is the same token detail page with the Comments tab pre-selected. They can switch to Transactions or Holder Distribution tabs, or navigate away via the nav bar.
Key Features (5)
  • Full token detail page with Comments tab pre-selected
  • Comment input field with placeholder text and Post button
  • Empty state message when no comments exist: No comments yet / Be the first to comment!
  • Same token header, chart, trading panel, and bonding curve as the main detail page
  • Transaction and Holder Distribution tabs still accessible alongside Comments
Interactive Elements (4)
  • Write a comment text input field
  • Post button to submit comment
  • Transactions / Comments / Holder Distribution tab switches
  • All trading panel controls (Buy/Sell, amount input, MAX, Trade on pool)
Testing Observations (5)
  • Comments tab is selected by default when accessing the /comments sub-route
  • Empty state renders correctly with No comments yet message
  • Comment input field accepts text with placeholder Write a comment...
  • Post button is present and clickable
  • Token data and trading panel load identically to the main detail page
Notes: This route serves as a sharable deep link that takes users directly to the conversation around a token, useful for social media sharing and community engagement campaigns.
Launch a Token
Click to zoom

Launch a Token

Public Pages
/launch
The token creation page where users can launch their own token on the GalaChain bonding curve. It is the primary onboarding funnel for token creators and is accessible to all authenticated users. The form guides users through providing token identity, social presence, initial buy, and reverse bonding curve parameters.
UI Patterns: Single-column centered form layout with clearly delineated sections via headings (Token Information, Social Information, Buy, Reverse Bonding Curve). Uses standard form controls with labels and placeholders for guidance. The form validates required fields before submission.
Navigation: Users navigate here from the Launch link in the main nav bar or the Launch a Coin button on the home page. After successful token creation, they are redirected to the token detail page. If not authenticated, the submit button shows an insufficient balance state.
Key Features (8)
  • Page header: Launch your token on GALACHAIN with key value props (No Presale, No Allocation, Lower Gas)
  • Image upload section for token logo (JPEG/JPG/PNG, less than 4MB)
  • Token Information section: Token Name, Token Symbol, and Token Description fields
  • Social Information section with fields for Website, Telegram, X, Instagram, Facebook, Reddit, and Tiktok (one required)
  • Initial Buy section to optionally be the first buyer of your own token
  • Reverse Bonding Curve configuration with Min and Max fee percentage inputs (defaults: 10% / 50%)
  • Fees Breakdown showing 1 GALA gas fee
  • Submit button showing balance-dependent state (Insufficient Balance when no wallet connected)
Interactive Elements (15)
  • Image file upload button (JPEG/JPG/PNG)
  • Token Name text input
  • Token Symbol text input
  • Token Description textarea with 0/250 character counter
  • Website URL input
  • Telegram URL input
  • X URL input
  • Instagram URL input
  • Facebook URL input
  • Reddit URL input
  • Tiktok URL input
  • Initial Buy GALA amount input
  • Reverse Bonding Curve Min percentage input (default 10)
  • Reverse Bonding Curve Max percentage input (default 50)
  • Submit button (Insufficient Balance / Launch Token)
Testing Observations (6)
  • Form renders with all fields and correct placeholders
  • Character counter shows 0/250 for description
  • RBC Min/Max fields show default values of 10 and 50
  • Submit button is disabled/shows Insufficient Balance when no wallet connected
  • Fees Breakdown displays 1 GALA
  • Social Information note indicates one social link is mandatory
Notes: The Reverse Bonding Curve (RBC) Min/Max fields control the sell-side fee range. These default to 10% min and 50% max, which are enforced by SDK validation. The form requires at least one social media link.
Launch Form (Filled)
Click to zoom

Launch Form (Filled)

Public Pages Forms
/launch?bypass=eth|0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
The token launch form accessed with an authenticated bypass session, showing the form in its authenticated state. This demonstrates what the form looks like when a user is signed in and ready to create a token, with the submit button reflecting the user's GALA balance rather than the unauthenticated state.
UI Patterns: Same form layout as the unauthenticated launch page. The primary visual difference is the submit button state, which changes from 'Insufficient Balance' to reflecting actual wallet balance or a 'Launch Token' ready state when the user has sufficient GALA.
Navigation: Same as the launch page, but accessed with the bypass auth parameter to simulate an authenticated user. After filling the form and submitting, the user would be redirected to the newly created token's detail page.
Key Features (5)
  • Same form fields as the unauthenticated launch page
  • Submit button reflects authenticated wallet balance state
  • User can fill in all fields and submit the form
  • Authenticated session via bypass parameter enables full form functionality
  • All validation rules are active (character limits, URL validation, required social link)
Interactive Elements (3)
  • All form inputs from the launch page
  • Submit button in authenticated state
  • Balance-aware initial buy amount input
Testing Observations (4)
  • Form renders identically to the unauthenticated version structurally
  • Submit button state may change to reflect authenticated user balance
  • Bypass auth parameter successfully authenticates the session
  • All form validation remains active
Notes: The bypass parameter simulates wallet authentication for testing purposes. In production, users authenticate via wallet connection (MetaMask, WalletConnect, etc.).
Fee Structure
Click to zoom

Fee Structure

Public Pages
/fees
A static informational page that transparently documents all platform fees for token creation, buying, and selling on the bonding curve. It serves as a reference for users who want to understand the cost structure before trading, and is targeted at both new and experienced users seeking fee clarity.
UI Patterns: Clean static content page with a structured data table for fee information and explanatory text below. Uses a simple single-column layout focused on readability.
Navigation: Users reach this page from the footer links or through direct navigation. It is a reference page with no outbound navigation beyond the standard nav bar and footer links.
Key Features (7)
  • Fee schedule table with columns: Action and Fee
  • Create a coin: 1 GALA (gas fee)
  • Buy on bonding curve: 1 GALA (gas) + 0.1% (trading fee)
  • Sell on bonding curve: 1 GALA (gas) + 0.1% (trading fee) + RBC fee (0-50% variable)
  • Graduation to GalaDEX: 0 GALA
  • Detailed footnotes explaining Gas fee, Trading fee, and RBC fee
  • Note about frontend services not charging additional fees
Interactive Elements (2)
  • Standard navigation bar links
  • Footer links (Terms, Privacy, Developer Docs, social media)
Testing Observations (4)
  • Fee table renders with all four fee categories
  • Footnote explanations are visible for gas, trading, and RBC fees
  • Note about frontend services is displayed
  • Page loads quickly as static content with no API calls needed
Notes: The RBC (Reverse Bonding Curve) fee is unique to sell operations and is variable between 0-50%, configured by the token creator during launch. This creates an asymmetric fee structure designed to discourage rapid selling.
How It Works
Click to zoom

How It Works

Public Pages
/how-it-works
An educational onboarding page that explains the GalaChain Launchpad mechanics to new users. It walks through the bonding curve trading lifecycle in four simple steps and provides additional context on swaps, fees, and the graduation process to the DEX. Targeted at first-time visitors and users unfamiliar with bonding curve mechanics.
UI Patterns: Vertical scrolling educational page with numbered steps in a list format, followed by explanatory sections with headings. Uses illustrations (swap icon) and structured content blocks for clear information hierarchy.
Navigation: Users arrive from the How It Works link on the home page or direct navigation. This is a terminal informational page; users typically navigate back to the home page or to the launch page after reading.
Key Features (5)
  • Four-step numbered process: (1) Pick a coin, (2) Buy via bonding curve, (3) Cash out anytime, (4) Bonding curve fills to 100% and graduates to GalaDex
  • Swap explanation section with visual icon describing how swaps differ from traditional order books
  • Fee structure breakdown: Create Coin (1 GALA), Buy (1 GALA + 0.1%), Sell (1 GALA + 0.1% + RBC 0-50%)
  • Detailed footnotes on Gas fee, Trading fee, and RBC fee mechanics
  • Safety assurance note about platform frontend services
Interactive Elements (2)
  • Standard navigation bar links
  • Footer links (Terms, Privacy, Developer Docs, social media)
Testing Observations (6)
  • All four numbered steps render with correct content
  • Swap section displays with swap icon image
  • Fee breakdown headings and amounts are correct
  • Footnotes for Gas, Trading, and RBC fees are visible
  • Note about platform services is present
  • Page is fully static with no dynamic data loading
Notes: This page duplicates some fee information from the /fees page but presents it in context of the overall trading lifecycle. The four-step process is the core user education funnel for the bonding curve concept.
My Profile
Click to zoom

My Profile

Public Pages
/my-profile?bypass=eth|0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
The authenticated user's private profile dashboard that consolidates all personal activity and management features. It serves as the central hub for token creators and traders to manage their tokens, view balances, track trade history, manage API access tokens, team members, and view granted access. Requires authentication to access.
UI Patterns: Profile header section with avatar, address display, and action buttons, followed by a six-tab interface for different profile data categories. Each tab uses consistent search/filter patterns. Empty states provide helpful messaging and CTA buttons.
Navigation: Users arrive from the My Profile link in the nav bar (requires authentication). From here they can navigate to their public profile, edit their profile, manage API keys, or invite team members. Token and trade links within tabs lead to respective detail pages.
Key Features (10)
  • User profile header with avatar image, truncated wallet address, Edit profile button, and Copy address button
  • View Badges link for user-level badge achievements
  • View Public Profile link to the user's public-facing profile page
  • Six-tab navigation: Tokens Launched, Token Balances, Trade Activity, Access Tokens, Team, My Access
  • Tokens Launched tab with status filter dropdown (All/Graduated/Active) and search
  • Token Balances tab with search for held tokens
  • Trade Activity tab with search for trade history
  • Access Tokens tab for API key management with Create Your First Key CTA
  • Team tab for managing stream moderators/managers with Invite Your First Team Member CTA
  • My Access tab showing tokens where the user has been granted moderator/manager access
Interactive Elements (11)
  • Edit profile button
  • Copy wallet address button
  • View Badges link
  • View Public Profile link
  • Six profile tabs: Tokens Launched, Token Balances, Trade Activity, Access Tokens, Team, My Access
  • Token status filter dropdown (All/Graduated/Active)
  • Search tokens input on Tokens Launched tab
  • Search tokens input on Token Balances tab
  • Search trades input on Trade Activity tab
  • Create Your First Key button on Access Tokens tab
  • Invite Your First Team Member button on Team tab
Testing Observations (7)
  • Profile header displays with truncated address eth|0x36C926...f06E
  • All six tabs render and are switchable
  • Empty states show appropriate messages for each tab
  • Token status filter dropdown has All/Graduated/Active options
  • Access Tokens tab shows CTA to create first API key
  • Team tab shows CTA to invite first team member
  • My Access tab shows No Team Access message
Notes: This page combines multiple management functions that would traditionally be separate pages. The six-tab design keeps everything accessible in one place. The bypass parameter provides wallet-based authentication for development testing.
My Profile -- API Keys
Click to zoom

My Profile -- API Keys

Public Pages Profile Tabs
/my-profile?bypass=eth|0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
The Access Tokens tab within the My Profile page where users manage API keys for delegating permissions to third-party services or automated systems. This is a developer-facing feature that enables programmatic access to the platform via the SDK and MCP server.
UI Patterns: Tab panel content area within the profile page's tab navigation. Uses an empty state pattern with descriptive text and a prominent CTA button when no API keys exist. When keys are present, they display in a list/table format.
Navigation: Users navigate to the My Profile page and click the Access Tokens tab. From there they can create new API keys or manage existing ones. The created keys are used externally with the SDK or MCP server.
Key Features (4)
  • Access Tokens tab within the profile tabs
  • Empty state with explanation: Create an access token to delegate permissions to third-party services or automated systems
  • Create Your First Key CTA button
  • Once keys exist: list of API keys with creation date, permissions, and revoke actions
Interactive Elements (3)
  • Access Tokens tab selector
  • Create Your First Key button
  • Key management actions (revoke/delete) when keys exist
Testing Observations (4)
  • Access Tokens tab is accessible and renders empty state
  • Empty state message clearly explains the purpose of access tokens
  • Create Your First Key button is visible and clickable
  • Tab switching between all six profile tabs works correctly
Notes: API keys created here enable per-user authentication that works alongside JWT session auth. This is critical for SDK integration and MCP server tool access.
My Profile -- Team
Click to zoom

My Profile -- Team

Public Pages Profile Tabs
/my-profile?bypass=eth|0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
The Team tab within the My Profile page where token owners can invite and manage team members (moderators and managers) for their tokens. This enables delegation of stream moderation and token management responsibilities to other users.
UI Patterns: Tab panel content area within the profile page's tab navigation. Empty state pattern with descriptive text and CTA button. When team members exist, they display with role assignments and management controls.
Navigation: Users navigate to the My Profile page and click the Team tab. From there they can invite new team members by generating invite links. Recipients claim invites via the /invite/{code} route.
Key Features (4)
  • Team tab within the profile tabs
  • Empty state with explanation: Invite people to help manage your streams. They'll get access based on the role you assign
  • Invite Your First Team Member CTA button
  • Once members exist: list of team members with roles, permissions, and management actions
Interactive Elements (3)
  • Team tab selector
  • Invite Your First Team Member button
  • Team member management actions (remove, change role) when members exist
Testing Observations (4)
  • Team tab is accessible and renders empty state
  • Empty state message clearly explains team member functionality
  • Invite Your First Team Member button is visible and clickable
  • Role assignment concept is communicated in the empty state
Notes: Team invites generate unique codes that are shared via links (/invite/{code}). The invite claim page (separate route) handles the acceptance flow.
My Profile -- My Access
Click to zoom

My Profile -- My Access

Public Pages Profile Tabs
/my-profile?bypass=eth|0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
The My Access tab within the My Profile page that shows the user which tokens they have been granted moderator or manager access to by token owners. This is the inverse view of the Team tab -- instead of managing your own team, it shows teams you've been added to.
UI Patterns: Tab panel content area with empty state messaging. When the user has been granted access to tokens, they display in a list showing token name, granted role, and relevant management links.
Navigation: Users navigate to the My Profile page and click the My Access tab. If they have been invited to manage a token, the token links here lead to the respective studio/management pages.
Key Features (3)
  • My Access tab within the profile tabs
  • Empty state with explanation: You haven't been granted moderator or manager access to any tokens yet. Token owners can invite you...
  • Once access exists: list of tokens with role assignments and access details
Interactive Elements (1)
  • My Access tab selector
Testing Observations (3)
  • My Access tab is accessible and renders empty state
  • Empty state explains how to get access (token owners can invite)
  • Tab renders within the standard profile tab navigation
Notes: This tab provides transparency about which tokens a user has management access to. It complements the Team tab by showing the receiving side of team invitations.
Public User Profile
Click to zoom

Public User Profile

Public Pages
/u/0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
The public-facing profile page for any user on the platform, viewable by anyone without authentication. It shows a user's trading activity, token launches, and holdings, providing transparency into trader behavior and reputation. This is the page others see when clicking a user's address.
UI Patterns: Compact profile header with address and stats summary, followed by a three-tab interface. The public profile is a stripped-down version of My Profile, showing only publicly visible data (no API keys, team, or access tabs).
Navigation: Users arrive by clicking creator address links on token detail pages, transaction history entries, or holder distribution lists. They can also reach this page via direct URL sharing. From here, users can navigate to individual token detail pages via the launched tokens or held tokens lists.
Key Features (7)
  • User address heading with truncated display (eth|36...f06e)
  • Full wallet address display below the heading
  • Copy profile URL button for sharing
  • Summary stats: Tokens Launched count with graduation percentage, Graduated count, Trades count, Volume in GALA
  • Three-tab navigation: Tokens Launched, Token Balances, Trade Activity
  • Token status filter dropdown (All/Graduated/Active) on Tokens Launched tab
  • Search functionality on each tab
Interactive Elements (6)
  • Copy profile URL button
  • Tokens Launched / Token Balances / Trade Activity tab navigation
  • Token status filter dropdown (All/Graduated/Active)
  • Search tokens input on Tokens Launched tab
  • Search tokens input on Token Balances tab
  • Search trades input on Trade Activity tab
Testing Observations (7)
  • Profile header shows truncated address correctly
  • Full address is displayed below
  • Copy profile URL button is present
  • Summary stats render: Tokens Launched, Graduated, Trades, Volume
  • All three tabs render with empty states when no data exists
  • No Overwatch link in nav bar (not authenticated as overseer)
  • Three tabs only (vs six on My Profile) - no API Keys, Team, or My Access
Notes: The public profile intentionally omits private management tabs (Access Tokens, Team, My Access) that are only visible on the authenticated My Profile page. The route uses /u/{address} shorthand.
Token Detail (Shorthand URL)
Click to zoom

Token Detail (Shorthand URL)

Public Pages
/t/glelmam
An alternative shorthand URL route that renders the same token detail and trading page as /buy-sell/{tokenName}. The /t/{name} format provides shorter, more shareable URLs optimized for social media and messaging platforms where character count matters.
UI Patterns: Identical to the standard token detail page (/buy-sell/{tokenName}). The shorthand route is purely a URL convenience with no UI differences.
Navigation: Users arrive via shared shorthand URLs from social media, messaging apps, or other external sources. The page functions identically to the full /buy-sell/{token} route. Internal navigation continues to use the full /buy-sell/ format.
Key Features (4)
  • Identical content to /buy-sell/glelmam - same token header, chart, trading panel, bonding curve, and tabs
  • Short URL format /t/{tokenName} for easy sharing
  • All trading functionality available (Buy/Sell, amount input, balance display)
  • Same Transactions, Comments, and Holder Distribution tabs
Interactive Elements (3)
  • All interactive elements identical to the token-detail page
  • Buy / Sell tabs, amount input, MAX button, Trade on pool button
  • Transactions / Comments / Holder Distribution tabs
Testing Observations (4)
  • Route /t/glelmam resolves to the same token detail content as /buy-sell/glelmam
  • All token data loads correctly: price, marketcap, volume
  • Trading panel is fully functional
  • URL does not redirect -- stays on /t/ path
Notes: This is a URL alias, not a redirect. The page renders directly at /t/{name} without changing the URL to /buy-sell/{name}. This is important for analytics tracking and social media link preservation.
Token Comments (Shorthand URL)
Click to zoom

Token Comments (Shorthand URL)

Public Pages
/t/glelmam/comments
The shorthand URL version of the token comments deep link, rendering the same token detail page with the Comments tab pre-selected. Provides a compact shareable link for directing users to a token's discussion thread.
UI Patterns: Same as the standard token comments page. The shorthand route is purely a URL convenience.
Navigation: Users arrive via shared shorthand comment URLs. The page functions identically to /buy-sell/{token}/comments. Useful for sharing discussion threads on social media with minimal URL length.
Key Features (4)
  • Identical to /buy-sell/glelmam/comments but with shorter /t/ URL prefix
  • Comments tab pre-selected in the bottom data section
  • Comment input field and Post button for adding comments
  • Full token trading functionality still accessible
Interactive Elements (4)
  • All interactive elements from the token detail page
  • Write a comment text input
  • Post button
  • Tab navigation (Transactions / Comments / Holder Distribution)
Testing Observations (4)
  • Route /t/glelmam/comments resolves correctly and shows Comments tab selected
  • Comment form renders with proper placeholder and Post button
  • Empty state shown when no comments exist
  • URL stays on /t/ path without redirect
Notes: Combines the shorthand URL benefit with the comments deep-link feature, making it the most concise way to share a link to a token's discussion.
Moderator Invite Claim
Click to zoom

Moderator Invite Claim

Public Pages
/invite/SAMPLE-CODE
The invite claim page where users accept moderator/manager invitations sent by token owners. When visiting this page with a valid invite code, the user can accept the invitation to gain management access to the inviting token's streams and moderation tools. With an invalid code, an error state is displayed.
UI Patterns: Simple centered content area within the standard page layout. Uses a status/alert pattern for error states with a clear recovery action (Go Home button). When the invite is valid, presents a clean acceptance interface.
Navigation: Users arrive via invite links shared by token owners (typically through messaging or email). With a valid code, they accept and are redirected to their profile or the token management page. With an invalid code, the Go Home button returns them to the home page.
Key Features (4)
  • Invite code validation against the backend
  • Error state display when invite code is invalid: Invite Error / Failed to load overseer invite
  • Go Home button to navigate away from an error state
  • When valid: invite acceptance UI with role description and accept/decline actions
Interactive Elements (2)
  • Go Home button (visible in error state)
  • Accept / Decline actions (visible with valid invite code)
Testing Observations (4)
  • Invalid invite code SAMPLE-CODE shows error state: Invite Error / Failed to load overseer invite
  • Go Home button is present and functional
  • Error state uses ARIA status role for accessibility
  • Standard nav bar renders without Overwatch link (not authenticated)
Notes: The error message says 'Failed to load overseer invite' even for moderator invites, suggesting the same component/API is used for both invite types. SAMPLE-CODE is not a real invite code so the error state is expected.
Overseer Invite Claim
Click to zoom

Overseer Invite Claim

Public Pages
/overseer-invite/SAMPLE-CODE
The overseer invite claim page where users accept invitations to become platform overseers (admins). Overseers gain access to the Overwatch dashboard for platform-wide moderation, user management, and analytics. With an invalid code, the same error state as the moderator invite is shown.
UI Patterns: Same pattern as the moderator invite page -- centered status content with error/success states. Uses the same component/layout as /invite/{code} but validates against the overseer invite system.
Navigation: Users arrive via overseer invite links shared by existing platform administrators. With a valid code, acceptance grants Overwatch dashboard access and redirects appropriately. With an invalid code, Go Home returns to the landing page.
Key Features (4)
  • Overseer invite code validation against the backend
  • Error state display when invite code is invalid: Invite Error / Failed to load overseer invite
  • Go Home button for error recovery
  • When valid: overseer role acceptance UI with elevated permission description
Interactive Elements (2)
  • Go Home button (visible in error state)
  • Accept / Decline actions (visible with valid invite code)
Testing Observations (4)
  • Invalid invite code SAMPLE-CODE shows error state: Invite Error / Failed to load overseer invite
  • Error state is identical to the moderator invite error state
  • Go Home button is present and functional
  • Standard nav bar renders without Overwatch link (not authenticated as overseer)
Notes: Overseer invites grant elevated platform-wide permissions compared to moderator invites which are token-scoped. The UI for claiming is very similar to the moderator invite, but the backend validation and resulting permissions differ significantly.

Studio (Creator)

Studio Landing
Click to zoom

Studio Landing

Studio (Creator)
/studio
The Studio landing page serves as the entry point for token creators who want to manage their live streaming and broadcast operations. For users without tokens, it displays a welcoming empty state encouraging them to launch their first token. The page is accessible to authenticated users and serves as the gateway to the full Studio experience.
UI Patterns: Centered empty state layout with prominent heading, descriptive text, and dual action buttons (Launch Token primary, Learn More secondary). Follows the platform's dark theme with clean typography.
Navigation: Users arrive here from the main navigation. From this page they can navigate to the token launch flow or documentation. Once they own a token, the page would show their token list instead of the empty state.
Key Features (7)
  • Welcome heading with broadcast control room messaging
  • Call-to-action to launch a token for new users
  • Learn More link to developer documentation
  • Moderator invitation note for non-owners
  • Navigation bar with home, Launch, and My Profile links
  • Live trade ticker banner at top of page
  • Standard site footer with legal links and social media
Interactive Elements (4)
  • Launch Token button (links to /launch)
  • Learn More button (links to /docs)
  • Navigation bar links (home, Launch, My Profile)
  • Bridge button in header
Testing Observations (4)
  • Empty state shown correctly for users without tokens
  • Trade ticker banner active with real-time trade data
  • Footer renders with all legal and social links
  • Page loads without errors for authenticated user
Notes: The bypass auth parameter authenticates as a non-owner user (0x36C9...), so the empty state is shown since this wallet has not created any tokens.
Studio Token Management
Click to zoom

Studio Token Management

Studio (Creator)
/studio/glelmam
The Studio detail page is the comprehensive control center for token owners to manage their live streaming operations, audience, and content. It provides streaming credentials, audience management, analytics, live trade monitoring, and real-time chat -- all in a single dashboard. This is the primary workspace for token creators running live broadcasts.
UI Patterns: Multi-panel dashboard layout with a hero banner showing token branding, a stepped onboarding flow for streaming setup, tabbed content panels for different management areas, and a sidebar with chat and analytics. Uses a dark theme consistent with the platform.
Navigation: Users arrive from the Studio landing page by selecting their token. The page provides deep navigation through seven tabs for different management areas. Links to the public token trading page and settings are available in the header.
Key Features (8)
  • Go Live section with RTMP/SRT streaming credential generation workflow (Generate, Configure, Go Live steps)
  • Start My Stream button to generate streaming credentials
  • Seven management tabs: Transactions, Comments, Holder Distribution, Simulcasts, Recordings, Participants, Team
  • Real-time chat panel with message input
  • Analytics dashboard showing current viewers, peak viewers, total streamed, and stream stats
  • Live Trades feed with real-time buy/sell activity and pause/clear controls
  • Studio Settings button for token configuration
  • View Token Page link to the public trading page
Interactive Elements (12)
  • Start My Stream button
  • Studio Settings button
  • View Token Page link
  • Tab navigation (Transactions, Comments, Holder Distribution, Simulcasts, Recordings, Participants, Team)
  • Chat message input with Send button
  • Participant search textbox and role filter dropdown (Viewers/Chatters/Banned)
  • Ban button per participant
  • Comment textbox with Post button
  • Add Destination button for simulcast
  • How does simulcast work? button
  • Invite Your First Team Member button
  • Live Trades Pause and Clear trades buttons
Testing Observations (8)
  • All seven tabs render with appropriate content or empty states
  • Holder Distribution shows the token creator at 100% ownership
  • Transactions tab shows buy/sell history with timestamps
  • Participants tab shows one viewer with Ban action available
  • Chat shows empty state with message input ready
  • Live Trades feed shows 2 trades with real-time WebSocket connection status (Connected)
  • Recordings tab shows empty state (no streams yet)
  • Simulcasts tab shows empty state with Add Destination CTA
Notes: This page is accessed with the token creator's bypass auth, so the full owner experience is visible including all management tabs and the Owner badge.
Studio Dashboard (Live Stream)
Click to zoom

Studio Dashboard (Live Stream)

Studio (Creator) streaming
/studio/{streamingTokenName}
The creator Studio dashboard during an active live broadcast. Shows the live stream player with title and duration, chat panel for audience interaction, and real-time analytics including viewer counts. The OWNER badge indicates creator-level access.
UI Patterns: Two-column studio layout, Real-time analytics sidebar, Live status indicators throughout
Navigation: Navigate to studio for a token with active stream
Key Features (6)
  • Live video player with stream title and timer
  • LIVE badge in header next to token ticker
  • Chat panel for real-time audience interaction
  • Analytics: Live Viewers, Peak Viewers, Total Streamed
  • Stream Stats showing LIVE status and last stream date
  • Emoji reaction bar on video player
Interactive Elements (5)
  • Chat input
  • Send button
  • Emoji reactions
  • Bottom tab navigation
  • Settings gear
Testing Observations (1)
  • Verify analytics update in real-time, chat works bidirectionally, viewer count increments.
Notes: Uses streaming token (dsafa/). OWNER badge indicates creator authentication.
Studio Controls & Analytics (Live)
Click to zoom

Studio Controls & Analytics (Live)

Studio (Creator) streaming
/studio/{streamingTokenName}
Scrolled-down view of the live Studio showing the bottom tab navigation, analytics sidebar, and Live Trades feed. The Transactions tab is active showing empty state, while the analytics sidebar displays real-time stream statistics and the Live Trades panel listens for trading activity.
UI Patterns: Tabbed content area, Real-time data sidebar, Empty state with descriptive messaging
Navigation: Scroll down on live studio page
Key Features (5)
  • Bottom tab row: Transactions, Comments, Holder Distribution, Simulcasts, Recordings, Participants, Team
  • Analytics sidebar with Stream Stats (LIVE status)
  • Live Trades panel: "Waiting for trades... Listening for dsafa trades"
  • Peak Viewers counter (2)
  • Content section showing Recordings count
Interactive Elements (3)
  • Tab buttons (7 tabs)
  • Settings gear icon
  • Live Trades toggle/filter
Testing Observations (2)
  • Verify Live Trades updates when trades occur via WebSocket.
  • Check tab switching works correctly.
Notes: Below-the-fold studio content during live stream.
Studio Analytics (Live Stream)
Click to zoom

Studio Analytics (Live Stream)

Studio (Creator) streaming
/studio/{streamingTokenName}
Studio view focused on the analytics sidebar during a live broadcast. Shows real-time viewer statistics, stream status, content metrics, and the Live Trades feed listening for token trading activity. The main content area shows the Transactions tab in empty state.
UI Patterns: Analytics dashboard sidebar, Real-time metric cards, Live data feeds
Navigation: View analytics section of live studio
Key Features (5)
  • Real-time analytics: 0 Live Viewers, 2 Peak Viewers, 0m Total Streamed
  • Stream Stats panel: Status LIVE, Last Stream date
  • Content metrics: Recordings count
  • Live Trades feed for token
  • Transaction history table (empty state)
Interactive Elements (2)
  • Tab navigation
  • Live Trades panel controls
Testing Observations (1)
  • Verify Peak Viewers increments correctly, Live Trades connects via WebSocket.
Notes: Analytics focus of the live studio experience.
Studio -- Recordings Tab
Click to zoom

Studio -- Recordings Tab

Studio (Creator) Studio Tabs
/studio/glelmam
The Recordings tab within the Studio detail page displays saved stream recordings for the token. It allows creators to review past broadcasts and manage their recording library. When no recordings exist, it shows an informative empty state.
UI Patterns: Tab panel content area within the Studio tabbed interface. Uses a status/empty state pattern with descriptive messaging when no content is available.
Navigation: Accessed by clicking the Recordings tab in the Studio detail page. The tab is one of seven management tabs available to token owners.
Key Features (4)
  • Empty state message indicating no recordings yet
  • Informative text explaining recordings appear after streams end
  • Part of the seven-tab Studio management interface
  • Integrated within the full Studio dashboard layout
Interactive Elements (1)
  • Recordings tab selector in the tab bar
Testing Observations (3)
  • Empty state renders correctly with appropriate messaging
  • Tab switching works between all seven tabs
  • No loading spinner visible for empty recordings list
Notes: Since no streams have been conducted for this token, the empty state is displayed. After a live stream ends, recordings would appear here with playback and management options.
Studio -- Simulcast Tab
Click to zoom

Studio -- Simulcast Tab

Studio (Creator) Studio Tabs
/studio/glelmam
The Simulcast tab within the Studio detail page enables token creators to configure multi-platform restreaming destinations such as YouTube, Twitch, and other RTMP-compatible platforms. It allows simultaneous broadcasting to multiple platforms alongside the Launchpad native stream.
UI Patterns: Tab panel content area within the Studio tabbed interface. Uses an empty state pattern with a primary action button (Add Destination) and a secondary help/info button for onboarding new users to the feature.
Navigation: Accessed by clicking the Simulcasts tab in the Studio detail page. Users can add new simulcast destinations from this tab, which would open a configuration form.
Key Features (4)
  • Empty state with no destinations configured message
  • Add Destination button to configure new restream targets
  • How does simulcast work? help button
  • Descriptive text explaining restreaming to YouTube, Twitch, and other platforms
Interactive Elements (3)
  • Simulcasts tab selector in the tab bar
  • + Add Destination button
  • How does simulcast work? button
Testing Observations (3)
  • Empty state renders with clear CTA for adding destinations
  • Help button available for feature explanation
  • Tab content area is properly contained within the panel
Notes: No simulcast destinations are configured for this token. The feature supports YouTube, Twitch, Facebook, and any RTMP-compatible streaming platform.
Studio Chat (Live Stream)
Click to zoom

Studio Chat (Live Stream)

Studio (Creator) streaming
/studio/{streamingTokenName}
Full studio view during a live broadcast with focus on the chat experience. The live video player shows the stream with reaction overlays, while the chat panel invites the first participant. Real-time analytics track viewer engagement alongside the broadcast.
UI Patterns: Chat-focused layout, Real-time messaging interface, Video + chat split view
Navigation: Studio page during active broadcast
Key Features (6)
  • Live stream player with "Demo Stream cc1eb1a6"
  • Chat panel with "Be the first one here!" empty state
  • Message input with send button
  • Emoji reaction bar on video
  • Analytics showing 2 Peak Viewers
  • Stream Stats: LIVE status with timestamp
Interactive Elements (4)
  • Chat message input
  • Send button
  • Emoji reaction buttons
  • Bottom tabs
Testing Observations (1)
  • Verify chat messages appear in real-time, emoji reactions broadcast to all viewers.
Notes: Chat-focused variant of the live studio.

Documentation

Getting Started
Click to zoom

Getting Started

Documentation
/docs
The Getting Started page is the primary entry point for the Launchpad SDK documentation. It provides installation instructions, a quick start guide with TypeScript examples, AI/MCP integration setup, authentication patterns, and a comprehensive API reference catalog organized by category. The page targets developers integrating the SDK into their applications.
UI Patterns: Documentation portal layout with a collapsible left sidebar for navigation, a breadcrumb trail, and a main content area with sequential sections. Uses card grids for API reference browsing, code blocks with syntax highlighting and copy buttons, and callout cards for feature highlights.
Navigation: Users arrive from the main site navigation or direct link. The sidebar provides navigation to all SDK category pages. API reference cards link to individual category detail pages. Links to MCP docs, code examples, and SDK explorer are prominently placed.
Key Features (8)
  • SDK hero with version badge (v5.0.3) and stats (286 methods, 34 categories, MCP ready)
  • Installation section with npm and yarn commands with copy buttons
  • Quick Start code example showing SDK initialization and basic API calls
  • AI Agent Integration section with MCP configuration for Claude
  • What You Can Build section showcasing SDK capabilities with method counts
  • Authentication section explaining JWT, API Key, and public access patterns
  • Complete API Reference grid with 34 category cards showing method counts and descriptions
  • Left sidebar navigation organized by Core Trading, DEX/GalaSwap, Operations, Community, Administration, and Utilities
Interactive Elements (8)
  • Search textbox in sidebar
  • Sidebar navigation links (34+ category links)
  • Code block copy buttons
  • API reference category cards (clickable links)
  • View on npm link
  • Full MCP Documentation link
  • Toggle navigation button for mobile sidebar
  • Explore Full API Reference anchor link
Testing Observations (6)
  • All sidebar categories render with correct links
  • Code blocks display TypeScript syntax with proper highlighting
  • API reference grid shows all 34 categories with accurate method counts
  • Version badge displays current SDK version
  • Stat counters show 286 methods
  • Copy buttons present on all code blocks
Notes: The docs layout uses a consistent sidebar that persists across all /docs/* pages. The page is publicly accessible without authentication.
MCP Integration
Click to zoom

MCP Integration

Documentation
/docs/ai
The MCP Integration page provides comprehensive documentation for connecting AI assistants (particularly Claude) to the Gala Launchpad platform via the Model Context Protocol. It covers server setup for both Claude Desktop and Claude Code CLI, environment configuration, a complete catalog of all 286 MCP tools organized by category, 51 prompt topics for AI interactions, and real-world workflow examples.
UI Patterns: Long-form documentation layout with the shared docs sidebar, hero section with stats badges, accordion/collapsible sections for tool categories, tabular data for environment variables, styled list items for prompt topics, and card-based workflow examples with category labels.
Navigation: Accessible from the docs sidebar under MCP Server or from the Getting Started page. Links to the full code examples page and Getting Started guide for deeper exploration.
Key Features (8)
  • Setup instructions for Claude Desktop (config file) and Claude Code CLI
  • Environment variables table (ENVIRONMENT, PRIVATE_KEY, DEBUG, TIMEOUT)
  • Complete MCP tools catalog with 286 tools across 34 categories, each showing read/write counts
  • Expand All / Collapse All toggle for tool categories
  • 51 AI prompt topics organized by Trading, Pool Discovery, Portfolio, Token Creation, DEX, Market Data, Bridge, Streaming, Administration, and Utilities
  • AI Workflow Examples section with four real-world scenarios (Token Analysis, Execute a Trade, SDK Development, Go Live)
  • Explain SDK feature section describing AI-powered code generation
  • Resources section with links to MCP protocol docs and npm package
Interactive Elements (7)
  • Code block copy buttons for config and CLI commands
  • Expand All / Collapse All buttons for tool categories
  • 34 collapsible tool category buttons showing read/write badge counts
  • Full MCP Documentation external link
  • npm package external link
  • Go to Code Examples link
  • Getting Started Guide link
Testing Observations (6)
  • All 34 tool categories render with correct read/write method counts
  • Total shows 286 MCP Tools in the stats section
  • 51 prompt topics listed and organized by category
  • Config code blocks display correct MCP server setup syntax
  • Workflow examples show four distinct use cases
  • Environment variables table is complete with defaults
Notes: This is one of the most content-rich documentation pages, serving as the bridge between AI/LLM capabilities and the Launchpad SDK.
AI-Ready Documentation
Click to zoom

AI-Ready Documentation

Documentation
/docs/ai-docs
The AI-Ready Documentation page provides downloadable machine-readable JSON reference files for programmatic integration with the Launchpad SDK. It offers three key assets: the AI Documentation Schema, SDK Usage Examples, and an OpenAPI 3.1 Specification. The page targets developers building custom tools, AI integrations, documentation generators, and automated testing systems.
UI Patterns: Documentation layout with the shared sidebar, hero section with stats, card-based asset descriptions with file size indicators and download buttons, bulleted feature lists for each asset, and a structured getting-started checklist at the bottom.
Navigation: Accessible from the docs sidebar under AI-Ready Docs. Links to MCP Server docs and Installation Guide for further setup. The download buttons trigger immediate file downloads.
Key Features (6)
  • Three downloadable reference assets with file sizes displayed (ai-docs.json ~265KB, explain-sdk-usage-ai.json ~303KB, openapi.json ~1.6MB)
  • Detailed content descriptions for each asset including what is included
  • Download buttons for each reference file
  • Common Use Cases section covering AI Model Integration, Custom Tool Development, Documentation Generation, Testing & Validation, Search & Discovery, and Integration Platforms
  • Getting Started steps for integrating the reference files
  • Stats badges showing reference asset count, 286 SDK methods, and 97+ API endpoints
Interactive Elements (5)
  • Download ai-docs.json button
  • Download explain-sdk-usage-ai.json button
  • Download openapi.json button
  • Configure MCP Server link
  • Installation Guide link
Testing Observations (5)
  • All three download buttons are rendered with appropriate labels
  • File sizes are displayed for each asset
  • Content descriptions include detailed bullet lists of what each file contains
  • Stats show correct values for methods and endpoints
  • Getting Started section provides clear sequential steps
Notes: These files are generated assets (*.generated.json) that provide the complete SDK surface area in machine-readable format for AI and automation consumption.
WebSocket Events
Click to zoom

WebSocket Events

Documentation
/docs/websocket-events
The WebSocket Events page provides a complete reference for all real-time events emitted by the Launchpad backend. It documents the Socket.IO event system used for live data streaming including trades, chat messages, stream status changes, and overseer monitoring. The page targets frontend developers implementing real-time features.
UI Patterns: Long-form reference documentation with the shared sidebar layout, hero section with stats badges, and multiple content sections. The page contains extensive event documentation organized into logical groupings.
Navigation: Accessible from the docs sidebar under WebSocket Events. Part of the main documentation navigation alongside Getting Started, SDK Explorer, and MCP Server docs.
Key Features (5)
  • Hero section with stats showing total events, categories, and methods
  • Multiple content sections (6 regions) covering different event categories
  • Event documentation organized by feature area
  • Real-time badge indicating live data capability
  • Shared docs sidebar for navigation to other documentation pages
Interactive Elements (3)
  • Docs sidebar navigation links
  • Search textbox in sidebar
  • Toggle navigation button
Testing Observations (4)
  • Page loads with all 6 content regions
  • Hero section displays event statistics
  • Sidebar navigation highlights current page
  • Content is very extensive (page tree exceeds 15000 characters at depth 3)
Notes: This is one of the largest documentation pages with very detailed event schemas. The content covers Socket.IO events for trading, streaming, chat, and overseer functionality.
SDK Explorer
Click to zoom

SDK Explorer

Documentation
/docs/sdk/explorer
The SDK Explorer is an interactive search and discovery tool for browsing all 48 SDK documentation topics. It provides a searchable interface with category filter buttons, allowing developers to quickly find documentation for specific SDK workflows covering trading, DEX operations, streaming, bridging, and more.
UI Patterns: Search-first interface with a prominent search input, horizontal filter button bar for category-based browsing, and a results list. Follows the documentation portal layout with the shared sidebar.
Navigation: Accessible from the docs sidebar as a top-level entry. Users can search or filter by category to discover SDK topics, then click through to detailed topic pages.
Key Features (4)
  • Search combobox for filtering across 48 SDK topics
  • Category filter buttons for quick filtering (Trading, DEX, Streaming, Bridge, Balances)
  • Topic count display showing 48 available topics
  • Integrated within the shared docs sidebar layout
Interactive Elements (7)
  • Search combobox (Search 48 SDK topics)
  • Trading filter button
  • DEX filter button
  • Streaming filter button
  • Bridge filter button
  • Balances filter button
  • Sidebar navigation links
Testing Observations (4)
  • Search input renders with correct placeholder text
  • Five category filter buttons are displayed
  • Topic count of 48 is shown
  • Page loads within the docs layout with sidebar
Notes: The Explorer provides a more interactive, search-driven approach to SDK documentation compared to the category-based Getting Started page.
SDK Examples
Click to zoom

SDK Examples

Documentation
/docs/sdk/examples
The SDK Examples page provides interactive code examples for every SDK workflow. It features a categorized topic sidebar with 51 topics spanning trading, pools, balances, DEX operations, chat, bridge, authentication, and administration. Users select a topic to view working TypeScript code examples with explanations.
UI Patterns: Master-detail layout with a scrollable category sidebar on the left and a code viewer panel on the right. Uses an Examples/Content toggle, category grouping with expandable sections, and a placeholder state when no topic is selected.
Navigation: Accessible from the docs sidebar under Code Examples. Users browse categories in the left panel and click a topic to load its code example in the right panel. Deep linking is supported via URL hash fragments.
Key Features (5)
  • 51 interactive example topics organized by category
  • Categorized sidebar with sections: Trading, Pools, Balances, Utilities, DEX Trading, DEX Pools, DEX Analytics, Chat, Bridge, Referrals, Auth, Live Stream, Ban Management, API Keys, Moderators, Overseers, Content Flags, Reactions, Trade History, Token Ban, NFTs
  • Stats display showing 51 topics, 286 methods, and Complete Workflows badge
  • Code viewer panel for displaying selected example code
  • Default empty state prompting user to select an example
Interactive Elements (4)
  • 51 clickable topic items in the category sidebar
  • Examples/Content toggle button
  • Category section headers
  • Code viewer panel with syntax highlighting
Testing Observations (5)
  • All 51 topics render in the sidebar organized by category
  • Default state shows 'Select an example to view code' message
  • Categories cover all major SDK areas
  • Stats badges display correct counts
  • Sidebar scrolls independently of the code viewer
Notes: This page supports deep linking via hash (e.g., /docs/sdk/examples#buy-tokens) to jump directly to a specific example topic.
SDK Category Page
Click to zoom

SDK Category Page

Documentation
/docs/sdk/trading
The SDK Category page provides detailed method-level documentation for a specific SDK category. Using Trading as the example, it lists all 13 methods with their parameter counts, read/write classification, descriptions, parameter details, return types, and workflow guidance. Each method card serves as a complete API reference entry.
UI Patterns: Method reference list layout within the docs sidebar framework. Each method is presented as an expandable card with badge indicators for read/write, parameter counts, and detailed description blocks. Uses a vertical scrolling layout with the shared sidebar.
Navigation: Accessed from the Getting Started API Reference section or the docs sidebar category links. Each category page follows the same template. Users can scroll through all methods or use the sidebar to navigate to other categories.
Key Features (6)
  • Category header with method count (13 methods for Trading)
  • Method cards with READ/WRITE badges indicating operation type
  • Parameter count display with required vs optional distinction
  • Detailed method descriptions including workflow steps, parameter explanations, and return value documentation
  • Critical usage warnings and best practice callouts
  • Methods include: calculateBuyAmount, calculateSellAmount, buy, sell, fetchTrades, calculateInitialBuy, getBundlerTransactionResult, calculateBuyAmountForGraduation, graduateToken, calculateBuyAmountLocal, calculateBuyAmountExternal, calculateSellAmountLocal, calculateSellAmountExternal
Interactive Elements (3)
  • Docs sidebar navigation for switching categories
  • Method cards (potentially expandable for parameter details)
  • Search textbox in sidebar
Testing Observations (5)
  • All 13 Trading methods are displayed with correct metadata
  • READ/WRITE badges correctly classify each method
  • Parameter counts match the method signatures
  • Critical warning callout renders for calculateBuyAmount requirement
  • Workflow descriptions provide step-by-step guidance
Notes: This template is shared across all 34 SDK categories. The Trading category is representative, showing both read-only calculation methods and write operations for executing trades.

Overwatch (Admin)

Overwatch Dashboard
Click to zoom

Overwatch Dashboard

Overwatch (Admin)
/overwatch/dashboard
Central command center for the Overwatch admin panel. Displays real-time platform health metrics through stat cards (Pending Flags, Active Bans, Total Users 266, Active Streams), a Flag Distribution chart showing Pending/Actioned/Dismissed breakdowns, a Live Activity feed for recent platform events, and Quick Actions linking to key management pages (Review Flags, Manage Bans, User Search, Live Streams, Token Registry).
UI Patterns: AdminLayout with collapsible sidebar navigation Stat card grid at top of content area Chart visualization for data distribution Activity feed with real-time updates Quick action link cards for common tasks
Navigation: Landing page after overseer authentication. Sidebar navigation provides access to all Overwatch sections organized by category.
Key Features (7)
  • Stat cards showing Pending Flags, Active Bans, Total Users, and Active Streams counts
  • Flag Distribution chart with Pending, Actioned, and Dismissed categories
  • Live Activity feed displaying recent platform events in real-time
  • Quick Actions section with links to frequently used admin pages
  • Sidebar navigation with sections: Overview, Moderation, Monitoring, Admin, Settings
  • User address lookup search in sidebar
  • Connected overseer wallet address and connection status shown at bottom of sidebar
Interactive Elements (5)
  • Sidebar navigation links to all Overwatch pages
  • User address lookup textbox in sidebar
  • Sidebar collapse/expand toggle button
  • Quick Action links navigate to specific management pages
  • Logout button for ending overseer session
Testing Observations (1)
  • Dashboard loads with live data from backend. Stat cards populate from aggregated API queries. Flag Distribution chart renders with real flag status data. Activity feed shows actual recent events.
Overwatch Streams
Click to zoom

Overwatch Streams

Overwatch (Admin) monitoring
/overwatch/streams
Stream monitoring interface for overseers to observe and manage live streaming activity across the platform. Displays stat cards for Active streams, Total Viewers, Idle streams, and Disabled streams. Features a global streaming toggle (currently ON) and a 'Disable all streaming' button for emergency shutdowns. Filter buttons allow viewing streams by status: live, idle, disabled, or all.
UI Patterns: OverwatchTabPage layout with header and stat cards Toggle switch for global feature control Button group for status filtering Stream card list with status badges
Navigation: Accessible from sidebar under Monitoring > Streams. Shows all platform streams with filtering by status.
Key Features (6)
  • Stat cards: Active, Total Viewers, Idle, Disabled stream counts
  • Global streaming toggle (ON/OFF) for platform-wide stream control
  • Disable all streaming emergency button
  • Filter button group: live, idle, disabled, all
  • Stream list with status indicators
  • Empty state message 'No Streams Found' when no active streams
Interactive Elements (4)
  • Global streaming ON/OFF toggle
  • Disable all streaming button
  • Filter buttons: live, idle, disabled, all
  • Refresh button
Testing Observations (1)
  • Currently shows 'No Streams Found' empty state. Global streaming toggle is ON. All stat cards show zero values, indicating no active streaming on this environment.
Stream Monitoring (Live State)
Click to zoom

Stream Monitoring (Live State)

Overwatch (Admin) streaming
/overwatch/streams
The Overwatch stream monitoring page showing active live broadcasts. Features stat cards with current stream counts, a global enable/disable toggle, filter tabs, and stream cards with live thumbnails. Each stream card provides a Disable button for immediate moderation action.
UI Patterns: Admin stat cards, Card grid with live previews, Global toggle control, Filter tabs
Navigation: Overwatch sidebar > Streams
Key Features (6)
  • 4 stat cards: Active Streams (2), Total Viewers (0), Idle (0), Disabled (0)
  • GLOBAL: ON status with DISABLE ALL emergency button
  • Filter tabs: Live, Idle, Disabled, All with count
  • Stream cards with live video thumbnails
  • Per-stream Disable buttons
  • Viewer count badges on cards
Interactive Elements (4)
  • DISABLE ALL button
  • Per-stream Disable buttons
  • Filter tabs (Live/Idle/Disabled/All)
  • Refresh button
Testing Observations (1)
  • Verify stream cards update in real-time, Disable button stops streams, GLOBAL toggle affects all streams.
Notes: Streaming variant captured with fewer active streams (2 vs 7 in static capture).
Overwatch Flags
Click to zoom

Overwatch Flags

Overwatch (Admin) moderation
/overwatch/flags
Content moderation queue for reviewing user-reported flags. Displays stat cards showing Pending (4), Total (7), Actioned (2), and Dismissed (1) flag counts. Provides a filterable data table with columns for Status, Type, Token, Reason, Content, Reporter, Date, and Actions. Supports filtering by Status (defaulting to Pending), Type (all types), and Reason (all reasons). Currently shows 7 flag entries for Stream and Chat content types.
UI Patterns: OverwatchTabPage layout with stat cards header Dropdown filter controls above data table Data table with sortable columns Action buttons in table rows Status badges (Pending, Actioned, Dismissed)
Navigation: Accessible from sidebar under Moderation > Flags. Each flag row has action buttons. Status filter defaults to 'Pending' to show items needing review.
Key Features (5)
  • Stat cards: Pending (4), Total (7), Actioned (2), Dismissed (1)
  • Filter dropdowns for Status (Pending default), Type, and Reason
  • Data table with Status, Type, Token, Reason, Content, Reporter, Date, Actions columns
  • Flag entries for Stream and Chat content types
  • Action buttons on each flag for moderation decisions
Interactive Elements (5)
  • Status filter dropdown (defaults to Pending)
  • Type filter dropdown
  • Reason filter dropdown
  • Action buttons on each flag row
  • Refresh button
Testing Observations (1)
  • Loaded with 7 real flag entries. Filter defaults to 'Pending' status. Flags cover both Stream and Chat content types. Action buttons visible on each row.
Overwatch Flags (Filters Open)
Click to zoom

Overwatch Flags (Filters Open)

Overwatch (Admin) moderation
/overwatch/flags
Same page as Overwatch Flags but with the filter panel expanded, showing all available filtering options. Displays the Status, Type, and Reason filter dropdowns in their expanded state above the flags data table.
UI Patterns: Expandable filter panel above data table Dropdown select controls for each filter dimension Immediate filtering without submit button
Navigation: Filter panel toggles open/closed via the Filters button. Changing any filter immediately updates the table results.
Key Features (5)
  • Expanded filter panel showing Status, Type, and Reason dropdowns
  • Status filter defaulting to 'Pending'
  • Type filter showing 'All Types'
  • Reason filter showing 'All Reasons'
  • Filters apply immediately to the data table below
Interactive Elements (4)
  • Status dropdown filter
  • Type dropdown filter
  • Reason dropdown filter
  • Filter panel toggle button
Testing Observations (1)
  • Filter panel expands to show all available filter controls. Filters apply immediately on change. Screenshot shows filter panel in expanded state.
Notes: Screenshot shows filter panel expanded. Same route as overwatch-flags but with filter panel open.
Overwatch Users
Click to zoom

Overwatch Users

Overwatch (Admin) moderation
/overwatch/users
User management interface showing all platform users with moderation status. Displays stat cards for Total Users (266), Flagged Users (1), and Banned Users (3). Features a paginated data table with columns for User (avatar), Address, Flags count, Bans count, Joined date, and Actions. Supports sorting by various criteria with configurable sort order.
UI Patterns: OverwatchTabPage layout with stat cards Sort control dropdowns Paginated data table Avatar + address user identity display Clickable rows linking to user detail
Navigation: Accessible from sidebar under Moderation > Users. Clicking a user row navigates to the User Detail page. Sort controls allow reordering the list.
Key Features (6)
  • Stat cards: Total Users (266), Flagged Users (1), Banned Users (3)
  • Sort By and Order dropdown filters
  • Data table with User avatar, Address, Flags, Bans, Joined, Actions columns
  • Paginated user list
  • User avatars with wallet address display
  • Click-through to individual user detail pages
Interactive Elements (5)
  • Sort By dropdown
  • Order dropdown (asc/desc)
  • Clickable user rows linking to detail pages
  • Pagination controls
  • Refresh button
Testing Observations (1)
  • Loaded with 266 total users. Shows real user data with avatar images, ETH addresses, flag/ban counts, and join dates. Pagination works correctly.
Overwatch Users (Filters Open)
Click to zoom

Overwatch Users (Filters Open)

Overwatch (Admin) moderation
/overwatch/users
Same page as Overwatch Users but with the filter panel expanded, showing Sort By and Order dropdown controls for organizing the user list.
UI Patterns: Expandable filter panel above data table Sort direction control
Navigation: Filter panel toggles via Filters button. Sort changes immediately reorder the user list.
Key Features (3)
  • Expanded filter panel with Sort By dropdown
  • Order dropdown (ascending/descending)
  • Filters apply immediately to the user table
Interactive Elements (3)
  • Sort By dropdown
  • Order dropdown
  • Filter panel toggle button
Testing Observations (1)
  • Screenshot shows filter panel in expanded state with sort controls visible.
Notes: Screenshot shows filter panel expanded. Same route as overwatch-users but with filter panel open.
Overwatch User Detail
Click to zoom

Overwatch User Detail

Overwatch (Admin) moderation
/overwatch/users/0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E
Comprehensive user profile page for overseer review. Shows a user profile header with avatar and wallet address, stat cards for Token Balances (0), Tokens Launched (0), Comments (0), and Flags Received (0). Features an 8-tab interface for deep user activity inspection: Token Balances, Tokens Launched, Trades, Comments, Chat, Flags, Reports, and Events.
UI Patterns: Profile header with user identity Stat cards summarizing user activity Multi-tab interface for different data categories Data tables within each tab
Navigation: Accessed by clicking a user row in the Users list. Tabs allow switching between different user activity views. Back button returns to user list.
Key Features (5)
  • User profile header with avatar and full wallet address
  • Stat cards: Token Balances, Tokens Launched, Comments, Flags Received
  • 8 activity tabs: Token Balances, Tokens Launched, Trades, Comments, Chat, Flags, Reports, Events
  • Each tab shows detailed filtered data for that user
  • Back navigation to user list
Interactive Elements (4)
  • 8 activity tab selectors
  • Data table interactions within each tab
  • Back navigation
  • User action buttons (ban, flag, etc.)
Testing Observations (1)
  • Loaded for the specified wallet address. All stat cards show zero values for this particular user. Tab interface renders correctly with all 8 tabs available.
Notes: Route uses the wallet address 0x36C9266E97F0e3dbe80E8b4aDC2E623cD9e0f06E as the dynamic parameter.
Overwatch Tokens
Click to zoom

Overwatch Tokens

Overwatch (Admin) monitoring
/overwatch/tokens
Token pool registry and monitoring interface. Displays stat cards for Total Pools (1713), Active Streams (0), Total Viewers (0), and Graduated (0). Features a filterable data table with columns for Token name, Price, Market Cap, Supply, Status (bonding curve/graduated), Stream status, and Creator address. Supports filtering by pool status.
UI Patterns: OverwatchTabPage layout with stat cards Dropdown filter for status Data table with financial data formatting Clickable rows to token detail Status badge indicators
Navigation: Accessible from sidebar under Monitoring > Tokens. Clicking a token row navigates to the Token Detail page. Filter narrows by pool status.
Key Features (6)
  • Stat cards: Total Pools (1713), Active Streams, Total Viewers, Graduated
  • Filter by Status dropdown
  • Data table: Token, Price, Market Cap, Supply, Status, Stream, Creator
  • Token rows link to individual token detail pages
  • Status badges for bonding curve and graduated states
  • Price and market cap displayed in USD
Interactive Elements (4)
  • Status filter dropdown
  • Clickable token rows linking to detail pages
  • Pagination controls
  • Refresh button
Testing Observations (1)
  • Loaded with 1713 total token pools. Shows real pricing data, market caps, and supply figures. Multiple tokens visible with varying statuses.
Overwatch Tokens (Filters Open)
Click to zoom

Overwatch Tokens (Filters Open)

Overwatch (Admin) monitoring
/overwatch/tokens
Same page as Overwatch Tokens but with the filter panel expanded, showing the Status filter dropdown for narrowing the token list by pool status (bonding curve, graduated, etc.).
UI Patterns: Expandable filter panel above data table Dropdown select for status filtering
Navigation: Filter panel toggles via Filters button. Status filter narrows results immediately.
Key Features (2)
  • Expanded filter panel with Status dropdown
  • Filter applies immediately to token table
Interactive Elements (2)
  • Status dropdown filter
  • Filter panel toggle button
Testing Observations (1)
  • Screenshot shows filter panel in expanded state with status filter visible.
Notes: Screenshot shows filter panel expanded. Same route as overwatch-tokens but with filter panel open.
Overwatch Token Detail
Click to zoom

Overwatch Token Detail

Overwatch (Admin) monitoring
/overwatch/tokens/glelmam
Detailed token administration page showing comprehensive information for the 'glelmam' token (symbol: EELEKM). Displays a token header with name, symbol, and BONDING CURVE status badge. Shows market data including Market Cap ($0.1172), GALA in Pool (20.00), Circulating Supply (755.36K), and Volume (20.00). Features creator information, per-token feature toggles (Chat OFF, Comments OFF), and a tabbed interface with Trades, Events, and Messages history.
UI Patterns: Token info header with status badge Market stat cards with live financial data Feature toggle switches for per-token settings Multi-tab interface for activity categories Trade history data table
Navigation: Accessed by clicking a token row in the Tokens list. Token name 'glelmam' is the URL parameter. Tabs show different activity views for this token.
Key Features (6)
  • Token header with name, symbol (EELEKM), and status badge (BONDING CURVE)
  • Market data: Market Cap, GALA in Pool, Circulating Supply, Volume
  • Creator address link
  • Per-token feature toggles: Chat (OFF), Comments (OFF)
  • Tabs: Trades, Events, Messages with historical data
  • Trade history table within Trades tab
Interactive Elements (5)
  • Chat feature toggle (currently OFF)
  • Comments feature toggle (currently OFF)
  • Trades/Events/Messages tab selectors
  • Creator address link to user detail
  • Back navigation to tokens list
Testing Observations (1)
  • Loaded with real data for 'glelmam' token. Market data populated with actual values. Feature toggles show current state. Trade history visible in Trades tab.
Notes: Route uses 'glelmam' as the token name parameter. Token symbol is EELEKM.
Overwatch Delisted Tokens
Click to zoom

Overwatch Delisted Tokens

Overwatch (Admin) moderation
/overwatch/delisted-tokens
Token ban management interface for removing tokens from the platform. Features a 'Delist Token' button for adding new delistings, a stat card showing 'Delisted Tokens - Currently delisted' count, a search box for filtering by token name, and a status area. Currently shows 'No tokens are currently delisted' empty state.
UI Patterns: OverwatchTabPage layout with header and action button Stat card summary Search box with clear functionality Empty state messaging List of delisted tokens when populated
Navigation: Accessible from sidebar under Moderation > Delisted Tokens. Delist Token button opens a modal for banning tokens. Search filters the delisted list.
Key Features (5)
  • Delist Token button for adding new token bans
  • Stat card: Delisted Tokens count
  • Search by token name textbox with clear button
  • Empty state: 'No tokens are currently delisted'
  • Refresh button
Interactive Elements (4)
  • Delist Token button (opens modal)
  • Token name search textbox
  • Clear search button
  • Refresh button
Testing Observations (1)
  • Page loaded with empty state - no tokens currently delisted. Search box and Delist Token button are functional. Stat card shows zero delisted tokens.
Overwatch Bans
Click to zoom

Overwatch Bans

Overwatch (Admin) moderation
/overwatch/bans
Banned users management interface. Features a prominent 'Ban User' button for creating new bans and a stat card showing Total Bans (6). Displays a data table with columns for User Address, Reason, Banned By (the overseer who issued the ban), Banned At date, and Actions (Unban button). Each ban entry has an Unban action button for reversing the ban.
UI Patterns: Action button in header for creating new entries Stat card summary Data table with action buttons per row Confirmation dialog for ban/unban actions
Navigation: Accessible from sidebar under Moderation > Banned Users. Ban User button opens a modal for issuing new bans. Unban buttons reverse existing bans.
Key Features (5)
  • Ban User button for creating new bans
  • Stat card: Total Bans (6)
  • Data table: User Address, Reason, Banned By, Banned At, Actions
  • Unban button on each ban entry
  • Banned By shows which overseer issued the ban
Interactive Elements (3)
  • Ban User button (opens modal)
  • Unban button on each ban row
  • Refresh button
Testing Observations (1)
  • Loaded with 6 active bans. All ban entries show complete data including the issuing overseer address. Unban buttons visible on each row.
Overwatch Trades
Click to zoom

Overwatch Trades

Overwatch (Admin) monitoring
/overwatch/trades
Trade activity monitoring dashboard with both historical and real-time views. Displays stat cards for Total Volume ($0), Buy Orders (0), Sell Orders (0), and Today's Trades (0). Features a dual-tab interface with History and Live Trades views. The History tab has extensive filtering: User Address, Direction (buy/sell), Date Range (from/to), and Amount Range. The Live Trades tab shows a WebSocket connection status indicator ('Connected') and real-time trade listening.
UI Patterns: Stat cards header Dual-tab interface (History / Live Trades) Expandable filter panel with multiple input types WebSocket connection status badge Real-time event stream display
Navigation: Accessible from sidebar under Monitoring > Trades. History tab shows past trades with filtering. Live Trades tab shows incoming trades via WebSocket.
Key Features (6)
  • Stat cards: Total Volume, Buy Orders, Sell Orders, Today's Trades
  • History tab with filterable trade table
  • Live Trades tab with WebSocket real-time feed
  • Filters: User Address, Direction, Date Range, Amount Range
  • WebSocket connection status indicator (Connected/Disconnected)
  • Pause/Clear/Refresh controls for live stream
Interactive Elements (7)
  • History/Live Trades tab selectors
  • User Address filter textbox
  • Direction filter dropdown
  • Date Range from/to date pickers
  • Amount Range inputs
  • Filters toggle button
  • Pause/Clear/Refresh controls for live stream
Testing Observations (1)
  • Stat cards show zero values on this environment. WebSocket connection shows 'Connected' status. Live Trades tab actively listening for events. Filter panel functional with multiple input types.
Overwatch Trades (Filters Open)
Click to zoom

Overwatch Trades (Filters Open)

Overwatch (Admin) monitoring
/overwatch/trades
Same page as Overwatch Trades but with the filter panel expanded, showing User Address, Direction, Date Range (from/to date pickers), and Amount Range filter controls above the trade history table.
UI Patterns: Expandable filter panel with mixed input types Text inputs, dropdowns, and date pickers in single filter panel Immediate filtering on input change
Navigation: Filter panel toggles via Filters button. Multiple filters can be combined for precise trade searches.
Key Features (5)
  • Expanded filter panel with User Address text input
  • Direction filter dropdown (buy/sell/all)
  • Date Range with from/to date picker inputs
  • Amount Range filter inputs
  • Filters apply immediately to trade history
Interactive Elements (5)
  • User Address text input
  • Direction dropdown
  • Date Range from/to date pickers
  • Amount Range inputs
  • Filter panel toggle button
Testing Observations (1)
  • Screenshot shows filter panel in expanded state with all filter controls visible including date pickers and amount range.
Notes: Screenshot shows filter panel expanded. Same route as overwatch-trades but with filter panel open.
Overwatch Invites
Click to zoom

Overwatch Invites

Overwatch (Admin) admin
/overwatch/invites
Overseer invitation management interface. Displays stat cards for Total Invites, Pending (awaiting claim), Claimed (successfully claimed), and Revoked (cancelled invites). Features a 'Create Invite' button, a search box, and a filterable invite list. The invite table shows Status (ACCEPTED/REVOKED/PENDING), Description, Invited By, Claimed By, Created date, and Actions (Revoke). Currently shows multiple invite entries with mixed statuses.
UI Patterns: OverwatchTabPage layout with stat cards and action button Search with filter controls Data list with status badges Action buttons per entry Address links to user detail pages
Navigation: Accessible from sidebar under Admin > Invites. Create Invite opens a modal. Invite entries link to user profiles. Revoke button cancels an invite.
Key Features (8)
  • Create Invite button for generating new overseer invitations
  • Stat cards: Total Invites, Pending, Claimed, Revoked
  • Search box for filtering invites
  • Filters button with Status combobox
  • Invite list: Status, Description, Invited By, Claimed By, Created, Actions
  • Status badges: ACCEPTED, REVOKED, PENDING
  • Revoke button on accepted and pending invites
  • Links to user detail pages for invited/claimed addresses
Interactive Elements (7)
  • Create Invite button (opens modal)
  • Search textbox
  • Clear search button
  • Filters button with Status combobox
  • Revoke button on each invite row
  • Invited By / Claimed By address links to user detail
  • Refresh button
Testing Observations (1)
  • Loaded with multiple real invite entries in ACCEPTED, REVOKED, and PENDING states. Invite descriptions include 'Mod capability test', 'test invite', etc. Address links navigate to user detail pages. Real-time WebSocket updates for invite status changes.
Overwatch WebSocket Connected Clients
Click to zoom

Overwatch WebSocket Connected Clients

Overwatch (Admin) admin
/overwatch/websocket
Connected Clients tab of the WebSocket Control page. Shows real-time monitoring of active WebSocket connections. Features a Room filter dropdown (All Rooms), an Auto-refresh toggle (5-second interval), and a Refresh button. Displays connected client information when active connections exist.
UI Patterns: Filter dropdown for room selection Auto-refresh toggle with interval Manual refresh button Client connection list
Navigation: Accessed by clicking the Connected Clients tab on the WebSocket page. Room filter narrows display to specific rooms. Auto-refresh keeps data current.
Key Features (5)
  • Connected Clients monitoring panel
  • Filter by Room dropdown (All Rooms default)
  • Auto-refresh checkbox with 5-second interval
  • Manual Refresh button
  • Connected client list with room assignments
Interactive Elements (4)
  • Room filter dropdown
  • Auto-refresh (5s) checkbox
  • Refresh button
  • Emit Events / Connected Clients tab selectors
Testing Observations (1)
  • Connected Clients tab accessible. Room filter dropdown available. Auto-refresh toggle functional. Currently showing connected client monitoring area.
Notes: Same route as overwatch-websocket-emitter but with Connected Clients tab selected.
Overwatch WebSocket Emitter
Click to zoom

Overwatch WebSocket Emitter

Overwatch (Admin) admin
/overwatch/websocket
WebSocket control interface for emitting real-time events to connected clients. Tab-based layout with 'Emit Events' (currently selected) and 'Connected Clients' tabs. The Emit Events tab features an event type dropdown with 15 event types (trade_executed, balance_updated, stream_status, viewer_count, stream_countdown, chat_message, chat_status, typing_indicator, token_banned, token_unbanned, moderator_added, moderator_removed, user_profile_updated, site_config_changed, feature_status), a JSON payload preview area, and form controls for constructing event payloads.
UI Patterns: Tab container with two sections Form with dynamic fields based on event type selection Dropdown select for event type JSON preview/editor area Connected clients monitoring panel
Navigation: Accessible from sidebar under Admin > WebSocket. Emit Events tab is selected by default. Select event type to populate form fields and JSON preview. Connected Clients tab shows active WebSocket connections.
Key Features (6)
  • Tab interface: Emit Events (selected) and Connected Clients
  • Event Type dropdown with 15 event types
  • JSON Preview area showing payload structure
  • Event types: trade_executed, balance_updated, stream_status, viewer_count, stream_countdown, chat_message, chat_status, typing_indicator, token_banned, token_unbanned, moderator_added, moderator_removed, user_profile_updated, site_config_changed, feature_status
  • Form-based event construction
  • Connected Clients tab for monitoring active connections
Interactive Elements (6)
  • Emit Events / Connected Clients tab selectors
  • Event Type dropdown (15 options)
  • Dynamic form fields per event type
  • JSON Preview display
  • Emit button to send event
  • Connected Clients: Room filter dropdown, Auto-refresh checkbox, Refresh button
Testing Observations (1)
  • Page loaded with Emit Events tab selected. Event Type dropdown shows all 15 event types. JSON Preview area shows placeholder text. Connected Clients tab accessible with room filter and auto-refresh toggle.
Notes: Screenshot shows the Emit Events tab selected. The Connected Clients tab is also visible but not active.
Overwatch Events
Click to zoom

Overwatch Events

Overwatch (Admin) monitoring
/overwatch/events
Platform event monitoring interface for tracking all user and system events. Displays stat cards for Total Events, Today (24h events), Unique Users, and Unique Tokens. Features a dual-tab interface with History and Live Stream views. The History tab includes a search box, expandable filter panel (User Address, Token, Date Range), and a data table with Time, Type, User, Token, Details, and Actions columns. The Live Stream tab shows real-time WebSocket event feed with Connected status, Pause/Clear/Refresh controls.
UI Patterns: OverwatchTabPage layout with stat cards Dual-tab interface (History / Live Stream) Search box with clear button Expandable filter panel Data table with expandable detail rows Real-time event stream with controls
Navigation: Accessible from sidebar under Monitoring > Events. History tab for historical lookup with filters. Live Stream tab for real-time monitoring.
Key Features (8)
  • Stat cards: Total Events, Today, Unique Users, Unique Tokens
  • History tab with searchable, filterable event table
  • Live Stream tab with real-time WebSocket event feed
  • Search box for event content
  • Filters: User Address, Token, Date Range
  • Data table: Time, Type, User, Token, Details, Actions
  • WebSocket connected status with event count
  • Pause/Clear/Refresh controls for live stream
Interactive Elements (8)
  • Search textbox with clear button
  • Filters toggle button
  • User Address filter textbox
  • Token filter textbox
  • Date Range from/to date pickers
  • History/Live Stream tab selectors
  • Expand buttons on event rows
  • Pause/Clear/Refresh controls for live stream
Testing Observations (1)
  • Page loaded with event data visible in the table. Filter panel includes User Address, Token, and Date Range controls. Live Stream tab shows Connected status with active listening. Multiple event rows visible with expand buttons.
Overwatch Messages
Click to zoom

Overwatch Messages

Overwatch (Admin) monitoring
/overwatch/messages
Platform messages monitoring interface for chat messages and comments across all tokens. Displays stat cards for Total Messages (277), Today's messages, Unique Users (143), and Unique Tokens. Features a dual-tab interface with History and Live Stream views. The History tab requires a Token Name or User Address to search, with filters for Token, User Address, and Type (chat/comment). The Live Stream tab shows real-time WebSocket message feed with Connected status.
UI Patterns: OverwatchTabPage layout with stat cards Dual-tab interface (History / Live Stream) Guided search requiring initial filter input Expandable filter panel Combobox for type selection Real-time message stream with controls
Navigation: Accessible from sidebar under Monitoring > Messages. History tab requires entering a Token or User Address filter before displaying results. Live Stream shows all incoming messages.
Key Features (8)
  • Stat cards: Total Messages (277), Today, Unique Users (143), Unique Tokens
  • History tab with message search (requires Token or User filter)
  • Live Stream tab with real-time WebSocket message feed
  • Search box for message content
  • Filters: Token, User Address, Type (chat/comment)
  • Type filter combobox for content type filtering
  • Prompt to enter Token Name or User Address before showing results
  • Pause/Clear/Refresh controls for live stream
Interactive Elements (7)
  • Search textbox for message content
  • Filters toggle button
  • Token name filter textbox
  • User Address filter textbox
  • Type combobox filter (All Types, chat, comment)
  • History/Live Stream tab selectors
  • Pause/Clear/Refresh controls for live stream
Testing Observations (1)
  • Page loaded with stat data (277 total messages, 143 unique users). History tab shows prompt to enter Token Name or User Address. Live Stream tab shows Connected status with active listening.
Overwatch Cache
Click to zoom

Overwatch Cache

Overwatch (Admin) admin
/overwatch/cache
Cache management interface for debugging and resolving stale data issues. Provides three levels of cache flushing: Flush by Address (clears profile data, overseer status, owned tokens, ban status for a specific wallet), Flush by Token (clears chat messages, recordings, holders data, price cache for a token), and Flush All Cache (nuclear option - clears ALL Launchpad cache). Each section has an input field and action button.
UI Patterns: Section-based layout with input + action button per section Warning labels for destructive actions Text input with placeholder for address/token input NUCLEAR OPTION label for full cache flush
Navigation: Accessible from sidebar under Admin > Cache. Each section operates independently. Users input an address or token name and click the flush button.
Key Features (5)
  • Flush by Address: input for eth address, clears profile/overseer/tokens/ban data
  • Flush by Token: input for token name, clears messages/recordings/holders/price data
  • Flush All Cache: nuclear option clearing all Launchpad cache
  • Warning about temporary performance hit for full cache flush
  • Production caution notice in page description
Interactive Elements (5)
  • Address input textbox (eth|... or 0x...)
  • Flush Address button
  • Token name input textbox
  • Flush Token button
  • Flush All Cache button
Testing Observations (1)
  • Page loaded with all three cache flush sections. Input fields accept addresses and token names. Flush All Cache section prominently labeled as NUCLEAR OPTION with warning text. Production caution notice visible.
Overwatch Platform Config
Click to zoom

Overwatch Platform Config

Overwatch (Admin) settings
/overwatch/platform-config
Platform-wide feature toggle configuration page. Displays a list of feature toggles that control platform capabilities with immediate effect. Features include: Live Streaming (allow creators to start streams), Stream Chat (enable real-time chat during streams), Token Comments (allow users to post comments on token pages), and Webhook Delivery (enable webhook event delivery). Each toggle has a description explaining its impact. All toggles currently show as 'on'. Includes an audit notice that all changes are logged.
UI Patterns: OverwatchTabPage layout with header Toggle switch list with descriptions Section headings per feature Descriptive text explaining each toggle's impact Audit trail notice at bottom
Navigation: Accessible from sidebar under Settings > Platform Config. Toggle changes apply immediately. No confirmation dialog - changes are instant.
Key Features (7)
  • Live Streaming toggle - control creator streaming capability
  • Stream Chat toggle - enable/disable real-time stream chat
  • Token Comments toggle - control comment posting on token pages
  • Webhook Delivery toggle - enable/disable webhook event delivery
  • Description for each toggle explaining impact
  • All changes take effect immediately
  • Audit notice: all changes are logged
Interactive Elements (5)
  • Live Streaming toggle (checkbox, currently on)
  • Stream Chat toggle (checkbox, currently on)
  • Token Comments toggle (checkbox, currently on)
  • Webhook Delivery toggle (checkbox, currently on)
  • Refresh button
Testing Observations (1)
  • All four feature toggles loaded in 'on' state. Each toggle has clear description text. Changes take effect immediately per the page description. Audit notice visible at bottom.
Overwatch Restricted Names
Click to zoom

Overwatch Restricted Names

Overwatch (Admin) settings
/overwatch/restricted-names
Restricted token name management interface for blocking specific words and patterns during token creation. Features a large textarea for entering restricted words/patterns (one per line), currently containing 629 entries. Includes a pattern examples guide showing supported formats: exact match ('gala'), contains match ('*gala*'), starts-with match ('test*'), and ends-with match ('*_admin'). An Update button saves changes to the restricted names list.
UI Patterns: OverwatchTabPage layout with header Large multiline textarea for bulk input Pattern documentation/help section Entry count display Save/Update action button
Navigation: Accessible from sidebar under Settings > Restricted Names. Edit the textarea to add/remove patterns, then click Update to save. Patterns are enforced during token creation.
Key Features (6)
  • Large textarea for restricted words/patterns (629 entries currently)
  • One pattern per line input format
  • Pattern examples guide: exact match, contains, starts-with, ends-with
  • Supported patterns: 'gala' (exact), '*gala*' (contains), 'test*' (starts with), '*_admin' (ends with)
  • Update button to save changes
  • Refresh button to reload current list
Interactive Elements (3)
  • Restricted names textarea (multiline, currently 629 entries)
  • Update button to save changes
  • Refresh button to reload list
Testing Observations (1)
  • Loaded with 629 existing restricted name entries. Pattern examples section clearly explains all supported formats. Textarea is editable for adding/removing patterns.

Legal

Terms & Conditions
Click to zoom

Terms & Conditions

Legal
/gala-terms-and-conditions
The Terms and Conditions page presents Gala's legal terms of service for the Launchpad platform. It contains the full legal text governing platform usage, user responsibilities, and service agreements. The page is publicly accessible and linked from the site footer.
UI Patterns: Simple content page layout with a single main content region containing legal text. Uses the standard site header with navigation and the shared footer. Minimal interactive elements -- purely informational.
Navigation: Linked from the site footer on every page. Also linked from the Privacy Policy page. Users typically arrive via footer navigation or during account-related flows.
Key Features (4)
  • Full-text legal terms and conditions content
  • Standard page layout with header navigation and footer
  • Live trade ticker banner at page top
  • Accessible without authentication
Interactive Elements (3)
  • Header navigation links
  • Footer links (Terms, Privacy Policy, Developer Docs)
  • Social media links in footer
Testing Observations (4)
  • Legal content renders in the main content region
  • Standard header and footer are present
  • Trade ticker banner continues to display
  • Page is publicly accessible
Notes: The legal text content is rendered within a region element in the main area. This is a static informational page.
Privacy Policy
Click to zoom

Privacy Policy

Legal
/gala-privacy-policy
The Privacy Policy page presents Gala's privacy and data handling policies for the Launchpad platform. It details how user data is collected, used, stored, and protected. The page is publicly accessible and linked from the site footer alongside the Terms and Conditions.
UI Patterns: Simple content page layout mirroring the Terms and Conditions page structure. Single main content region with legal text, standard site header and footer. Minimal interactive elements.
Navigation: Linked from the site footer on every page. Also linked from the Terms and Conditions page. Users typically arrive via footer navigation.
Key Features (4)
  • Full-text privacy policy content
  • Standard page layout with header navigation and footer
  • Live trade ticker banner at page top
  • Accessible without authentication
Interactive Elements (3)
  • Header navigation links
  • Footer links (Terms, Privacy Policy, Developer Docs)
  • Social media links in footer
Testing Observations (4)
  • Privacy policy content renders correctly
  • Page structure matches the Terms and Conditions template
  • Standard header and footer are present
  • Page is publicly accessible
Notes: This is a static informational page with the same layout pattern as the Terms and Conditions page.

Misc / Error States

Server Down / Connection Error
Click to zoom

Server Down / Connection Error

Misc / Error States
/server-down
The Server Down page is an error state page displayed when the application cannot connect to the GalaChain backend server. It informs users that their computer may be offline or the server may be experiencing problems, and provides a retry mechanism. This is a system-level fallback page shown during connectivity failures.
UI Patterns: Centered error state layout with a simple heading, explanatory text, and a single action button. Follows a minimal design pattern appropriate for error pages where full navigation may not be functional.
Navigation: Users are automatically redirected here when API health checks fail. The Try again button reloads the page to attempt reconnection. No standard navigation is shown since the backend is unavailable.
Key Features (4)
  • Connection error heading
  • Descriptive message about potential causes (offline computer or server issues)
  • Try again button for retry
  • Minimal page layout without standard navigation
Interactive Elements (1)
  • Try again button
Testing Observations (4)
  • Error message renders clearly with cause explanation
  • Try again button is prominently displayed
  • No standard navigation bar is shown (appropriate for error state)
  • Page loads as a standalone error view
Notes: This page is triggered by the frontend health check system. In production, it appears when the backend API at /api/health returns an error or times out.
Restricted Jurisdiction
Click to zoom

Restricted Jurisdiction

Misc / Error States
/restricted-jurisdiciton
The Restricted Jurisdiction page is a geo-blocking compliance page shown to users accessing the platform from jurisdictions where the service is not available. It identifies the user's detected country and explains that the site is unavailable due to local laws and regulations. It provides options to access the Privy wallet for fund withdrawal and to contact support.
UI Patterns: Centered compliance page layout with clear heading, explanation text, and action links. Follows a minimal design similar to other error/status pages, focused on providing essential information and recovery options for affected users.
Navigation: Users are automatically redirected here based on geo-IP detection. They can access the Privy wallet to withdraw funds or contact support. No standard site navigation is provided since the platform is blocked.
Key Features (5)
  • Restricted Jurisdiction heading
  • Detected jurisdiction display (shows United Kingdom as example)
  • Legal compliance explanation referencing local laws
  • Access Privy wallet link for fund withdrawal
  • Contact Support link for assistance
Interactive Elements (2)
  • Access Privy wallet link
  • Contact Support link
Testing Observations (4)
  • Jurisdiction name (United Kingdom) is dynamically displayed
  • Both action links are rendered and accessible
  • Page provides clear explanation of why access is restricted
  • No standard navigation is shown (appropriate for blocked state)
Notes: The route has a typo in the URL (jurisdiciton instead of jurisdiction). The detected jurisdiction is determined by the geo-IP system and displayed dynamically.
404 Not Found
Click to zoom

404 Not Found

Misc / Error States
/this-page-does-not-exist-404
The 404 page is the standard not-found error page displayed when users navigate to a URL that does not match any known route. It provides a clear error message and a link to return to the homepage. This is the catch-all fallback for invalid routes.
UI Patterns: Centered error page layout with a prominent error code, heading text, brief explanation, and a single recovery action button. Follows a minimal, clean design pattern standard for 404 pages.
Navigation: Users arrive at this page when navigating to any invalid URL. The Go to Home link provides the primary recovery path back to the main application.
Key Features (4)
  • Large 404 error code display
  • Page Not Found heading
  • Descriptive message explaining the page does not exist or has been moved
  • Go to Home link for navigation recovery
Interactive Elements (1)
  • Go to Home link (navigates to /)
Testing Observations (5)
  • 404 error code is prominently displayed
  • Error message is clear and helpful
  • Go to Home link is rendered and functional
  • No standard navigation bar is shown
  • Page renders without JavaScript errors
Notes: This is a client-side 404 handled by the React router. The page renders within the SPA shell but without the full navigation structure.
Slide